<template>
  <!-- 昨日访客目的地排行 -->
  <div class="destination-rank chart-box1">
    <div class="chart-title">昨日访客目的地排行</div>
    <div class="chart-content" :id="chartId"></div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  onMounted,
  onBeforeUnmount,
  nextTick,
  toRaw,
  watch,
} from "vue";
import DataSet from "@antv/data-set";
import { Chart } from "@antv/g2";
import store from "../../../../store";

export default defineComponent({
  name: "DestinationRank ",
  setup(props) {
    const state = reactive({
      chartId: "desRankChart",
      chart: null,
      data: [],
    });

    const initChart = () => {
      const data = toRaw(state.data);
      const ds = new DataSet();
      const dv = ds.createView();
      dv.source(data).transform({
        type: "percent",
        field: "value",
        dimension: "type",
        as: "percent",
      });

      const colorMap = {
        A栋: "rgba(24, 144, 255 ,0.6)",
        B栋: "rgba(56,176,92 ,0.6)",
        C栋: "rgba(220,106,31 ,0.6)",
      };

      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
      });
      state.chart.data(dv.rows);
      state.chart.legend(false);

      state.chart.coordinate("theta", {
        radius: 0.5,
        innerRadius: 0.3,
      });
      state.chart.tooltip({
        showMarkers: false,
        showTitle: false,
      });
      state.chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("type", (val) => colorMap[val])
        .style({
          stroke: "white",
          lineWidth: 1,
        })
        .label("type", {
          offset: -5,
          style: {
            fill: "white",
            shadowBlur: 2,
            shadowColor: "rgba(0, 0, 0, .45)",
          },
        })
        .tooltip("type*percent", (type, percent) => {
          return {
            name: type,
            value: Math.floor(Number(percent) * 100) + "%",
          };
        });

      const ds2 = new DataSet();
      const dv2 = ds2.createView();
      dv2.source(data).transform({
        type: "percent",
        field: "value",
        dimension: "name",
        as: "percent",
      });
      const outterView = state.chart.createView();
      outterView.data(dv2.rows);
      outterView.coordinate("theta", {
        innerRadius: 0.5,
        radius: 1,
      });
      outterView
        .interval()
        .adjust("stack")
        .position("percent")
        .color("type*name", (type, name) => colorMap[type])
        .style({
          stroke: "rgba(255,255,255,0.5)",
          lineWidth: 1,
        })
        .label("name", {
          offset: -10,
          style: {
            fill: "white",
            shadowBlur: 2,
            shadowColor: "rgba(0, 0, 0, .45)",
          },
        })
        .tooltip("name*percent", (name, percent) => {
          return {
            name: name,
            value: Math.floor(Number(percent) * 100) + "%",
          };
        });

      state.chart.interaction("element-active");

      state.chart.render();
    };

    watch(
      () => store.getters.flow.FlowVisitorDestination,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    let timeout = null;
    const getData = () => {
      const { FlowVisitorDestination } = store.getters.flow;
      if (FlowVisitorDestination) {
        state.data = FlowVisitorDestination.list;
      }
      if (state.chart) {
        state.chart.changeData(toRaw(state.data));
      } else {
        nextTick(() => {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          timeout = setTimeout(() => {
            initChart();
          }, 500);
        });
      }
    };

    onMounted(() => {
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
